<template>
	<div class="login-wrap">
		<h2 class="log-logo reg-logo tc"><a href="/"><img src="../../assets/images/login/login-logo.png"></a></h2>
		<div class="login-wmain pl5 pr5">
			<div class="log-box mt30">
				<i class="log-ico log-telico fa fa-mobile-phone" aria-hidden="true"></i>
				<input class="log-inp" type="text" placeholder="手机号码" v-model="telphone" oninput="if(value.length>11)value=value.slice(0,11)">
			</div>
			<div class="log-box mt30">
				<i class="log-ico fa fa-envelope-open-o" aria-hidden="true"></i>
				<input class="log-inp" type="text" placeholder="短信验证码" v-model="telcode" oninput="if(value.length>4)value=value.slice(0,4)">
			</div>
			<div class="log-box mt30">
				<i class="log-ico fa fa-key" aria-hidden="true"></i>
				<input class="log-inp" type="password" placeholder="密码" v-model="password">
			</div>
			<div class="log-box mt30">
				<i class="log-ico fa fa-key" aria-hidden="true"></i>
				<input class="log-inp" type="password" placeholder="确认密码" v-model="againpassword">
			</div>
			<div class="log-other clearfix pb3">
				<div class="log-tips fl" v-show="tips" v-text="tipstext"></div>
				<span class="forgetpwd fr">&nbsp;<!--忘记密码？--></span>
			</div>
			<button class="log-btn mt5" v-on:click="regfun" v-text="loadingtext">注册</button>
			<p class="log-reg mt5 tr"><router-link to="/login">我有账户，立即登录</router-link></p>
		</div>
	</div>
</template>

<script>
	export default{
		data(){
			return{
				'telphone':'',
				'telcode':'',
				'password':'',
				'againpassword':'',
				'tips':false,
				'loadingtext':'注册',
				'tipstext':''
			}
		},
		mounted: function() {
		    document.getElementsByTagName("body")[0].className="bgfff"; 
		},
		methods:{
			regfun: function(){
				const that = this;
				let telreg =  /^0?(13[0-9]|15[012356789]|18[02356789]|14[57])[0-9]{8}$/
				if( !telreg.test(this.telphone) ){
					this.tips = true
					this.tipstext = '手机号码不能为空！'
					return
				}
				else if( this.telcode == '' || this.telcode.length !=4 ){
					this.tips = true
					this.tipstext = '验证码必须是4位数！'
					return
				}
				else if ( this.password.length < 6 || this.password.length > 12 ){
					this.tips = true
					this.tipstext = '密码为6-12位长度！'
					return
				}
				else if ( this.againpassword!=this.password ){
					this.tips = true
					this.tipstext = '两次输入密码不一致！'
					return
				}
				this.loadingtext = '注册中...'
				setTimeout(function(){
					that.$router.push("/login")
				},2000)
			}
		},
		beforeDestroy () {
		    document.getElementsByTagName("body")[0].className="";
		}
	}
</script>

<style>

</style>